<template>
	<view class="container">
		<view class="item">
			<text>网址:</text><input type="text" @input="onKeyInput" placeholder="请输入网址" />
		</view>
		<view>
			<button type="primary" @click="getQRCode">生成二维码</button>
		</view>
		<view v-if="isShow">
			<img class="img" :src="this.info">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				info: '',
				isShow:false
			};
		},
		methods: {
			onKeyInput(event) {
				this.url = event.detail.value
				console.log(this.url)
			},
			getQRCode() {
				if(this.url==""){
					uni.$showMsg('请填写url地址')
					return
				}
				this.isShow=true
				this.info = "https://api.oioweb.cn/api/qrcode/encode?text=" + this.url +
					"&amp;m=2&amp;type=jpg&amp;size=15"
			}
		}
	}
</script>

<style lang="scss">
	.img {
		display: block;
		-webkit-user-select: none;
		margin: auto;
		cursor: zoom-in;
		background-color: hsl(0, 0%, 90%);
		transition: background-color 300ms;
		width: 200px;
		height: 200px;
	}
</style>